<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="padding: 20px;" class="head">
        <el-radio-group v-model="radio1">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="收藏"></el-radio-button>
        </el-radio-group>
        <el-button type="success" @click="add">添加素材</el-button>
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="50">
        <el-col
          :xs="24"
          :sm="12"
          :md="6"
          :lg="4"
          v-for="(imgs, index) in img"
          :key="index"
          style="position:relative"
        >
          <el-image
            class="img"
            style="height: 134px"
            :src="imgs.url"
            fit="fill"
          ></el-image>
          <div class="aaa">
            <i
              :class="imgs.collect ? 'el-icon-star-on' : 'el-icon-star-off'"
              @click="onCollect(index)"
            ></i>
            <i @click="onDelete(index)" class="el-icon-delete"></i>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="80"
        style="text-align: right;margin-top: 20px;"
      >
      </el-pagination>
    </el-card>
    <!-- 弹出层 -->
    <el-dialog
      title="上传素材"
      :visible.sync="uploadVisible"
      :append-to-body="true"
      class="lod"
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "image",
  data() {
    return {
      uploadVisible: false, //弹出层是否显示
      radio1: "全部",

      img: [
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        },
        {
          id: 1,
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          collect: false,
          delete: false
        }
      ]
    };
  },
  methods: {
    add() {
      this.uploadVisible = true;
    },
    onCollect(index) {
      this.img[index].collect = !this.img[index].collect;
    },
    onDelete(index) {
      this.img.splice(index, 1);
    }
  }
};
</script>
<style>
/* .el-upload{
  width: 100%;
  height: 100%;
} */

.el-upload-dragger {
  width: 100% !important;
  height: 150px !important;
}
</style>
<style lang="less" scoped>
.head {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.lod {
  text-align: center;
  margin: auto;
  width: 50%;
}
.aaa {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 18px;
  background-color: rgba(87, 83, 83, 0.25);
  height: 26px;
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 4px;
}
</style>
